import React from 'react'
import { TextField, FormLabel, ListItem, Select, Button, FormControl } from '@material-ui/core'
import { Search, Loop } from '@material-ui/icons';
import { makeStyles } from '@material-ui/core/styles';
import SiAnniu from './SiAnniu'
import Shuju from './Shuju'
import PubSub from 'pubsub-js'

const useStyles = makeStyles((theme) => ({
    btnSearch: {
        marginLeft: '15px',
        marginRight: '15px',
        minWidth: '60px'
    },
    btnReset: {
        minWidth: '80px',
    }
}));
export default function Post() {
    const [data, setstata] = React.useState({
        // 表单参数
        form: {
            dictId: undefined,
            dictName: undefined,
            dictType: undefined,
            status: "0",
            remark: undefined
        },
        // 表单校验
        rules: {
            dictName: [
                { required: true, message: "字典名称不能为空", trigger: "blur" }
            ],
            dictType: [
                { required: true, message: "字典类型不能为空", trigger: "blur" }
            ]
        }
    })
    // 表单重置
    const reset = () => {
        setstata(data => {
            const newform = {
                dictId: undefined,
                dictName: undefined,
                dictType: undefined,
                status: "0",
                remark: undefined
            };
            return newform
        })
    }

    const getValue = (mes) => {
        const newLoginForm = data.form;
        return (event) => {
            newLoginForm[mes] = event.target.value;
            // setValue(event.target.value);
            setstata({ form: newLoginForm });
        };
    }

    //查询方法
    const select = () => {
        PubSub.publish('TiaoJian', { dictName: data.form.dictName, dictType: data.form.dictType, status: data.form.status })
        PubSub.publish('ShuXin', 1)
    }


    const classes = useStyles();
    //初始化下拉框值
    const [state, setState] = React.useState({
        age: '',
        name: '',
    });
    //赋值给下拉框
    const handleChange = (event) => {
        const name = event.target.name;
        setState({
            ...state,
            [name]: event.target.value,
        });
        setstata({
            ...data,
            [data.form.status]: event.target.value,
        })

    };
    return (
        <div>
            <div>
                <ListItem>
                    <FormLabel
                        style={{ color: 'black', marginRight: '15px', minWidth: '70px' }}
                    >字典名称</FormLabel>
                    <TextField
                        style={{ minWidth: '200px' }}
                        variant='outlined'
                        placeholder='请输入字典名称'
                        size='small'
                        onChange={getValue('dictName')}
                        value={data.form.dictName}
                    >
                    </TextField>
                    <FormLabel
                        style={{ color: 'black', marginLeft: '15px', marginRight: '15px', minWidth: '70px' }}
                    >字典类型</FormLabel>
                    <TextField
                        style={{ minWidth: '200px' }}
                        variant='outlined'
                        placeholder='请输入岗位名称'
                        size='small'
                        onChange={getValue('dicType')}
                        value={data.form.dictType}
                    >
                    </TextField>
                    <FormLabel
                        style={{ color: 'black', marginLeft: '30px', marginRight: '15px', minWidth: '40px' }}
                    >状态</FormLabel>
                    <FormControl variant="outlined">
                        <Select
                            native
                            style={{ height: '45px', minWidth: '150px' }}
                            value={state.age}
                            onChange={handleChange}
                            inputProps={{
                                name: 'age',
                            }}
                        >
                            <option value="" style={{ display: 'none' }}>岗位状态</option>
                            <option value={1}>正常</option>
                            <option value={0}>停用</option>
                        </Select>

                    </FormControl>
                    <Button className={classes.btnSearch} variant="contained" color="primary" onClick={select}>
                        <Search />搜索
                    </Button>
                    <Button className={classes.btnReset} variant="outlined" color="primary" onClick={reset}>
                        <Loop />重置
                    </Button>
                </ListItem>
            </div>

            <SiAnniu />
            <br />
            <br />
            <br />
            <br />
            <Shuju />
        </div>

    )
}






